<template>
  <v-spin :spinning="spinLoading" :tip="textLoading">
    <v-card :bodyStyle="{ padding: '10px' }">
      <v-form-model ref="ruleForm" layout="inline">
        <v-form-model-item label="内容">
          <v-input placeholder="input placeholder"></v-input>
        </v-form-model-item>
        <v-form-model-item label="状态">
          <v-select placeholder="select placeholder" style="width: 180px">
            <v-select-option value="jack">Jack</v-select-option>
            <v-select-option value="lucy">Lucy</v-select-option>
            <v-select-option value="Yiminghe">yiminghe</v-select-option>
          </v-select>
          <v-form-model-item class="ml-10">
            <v-button type="primary" class="mr-10">查询</v-button>
            <v-button class="mr-10">重置</v-button>
          </v-form-model-item>
        </v-form-model-item>
      </v-form-model>
    </v-card>
    <v-card class="mt-10" :bodyStyle="{ padding: '0px' }">
      <v-tabs>
        <v-tab-pane tab="Tab 1" key="1" class="plr-10 pb-20">
          <div class="text-right mb-10">
            <v-button>导出</v-button>
          </div>
          <vcu-table :data="tableData">
            <vcu-table-column type="seq" width="60"></vcu-table-column>
            <vcu-table-column field="name" title="Name"></vcu-table-column>
            <vcu-table-column field="sex" title="Sex"></vcu-table-column>
            <vcu-table-column field="age" title="Age"></vcu-table-column>
            <template v-slot:pagination>
              <v-pagination
                size="small"
                v-model="pagination.current"
                :total="pagination.total"
                :defaultPageSize="pagination.pageSize"
                :showSizeChanger="pagination.showSizeChanger"
                :pageSizeOptions="pagination.pageSizeOptions"
                :showQuickJumper="pagination.showQuickJumper"
              />
            </template>
          </vcu-table>
        </v-tab-pane>
        <v-tab-pane tab="Tab 2" key="2" class="plr-10 pb-20">
          <vcu-table :data="tableData">
            <vcu-table-column type="seq" width="60"></vcu-table-column>
            <vcu-table-column field="name" title="Name"></vcu-table-column>
            <vcu-table-column field="sex" title="Sex"></vcu-table-column>
            <vcu-table-column field="age" title="Age"></vcu-table-column>
            <template v-slot:pagination>
              <v-pagination
                size="small"
                v-model="pagination.current"
                :total="pagination.total"
                :defaultPageSize="pagination.pageSize"
                :showSizeChanger="pagination.showSizeChanger"
                :pageSizeOptions="pagination.pageSizeOptions"
                :showQuickJumper="pagination.showQuickJumper"
              />
            </template>
          </vcu-table>
        </v-tab-pane>
      </v-tabs>
    </v-card>
  </v-spin>
</template>

<script>
export default {
  name: "template2",
  components: {},
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  data() {
    return {
      textLoading: "",
      loadingTextObj: {
        loading: "页面初始化中...",
        updata: "数据提交中...",
      },
      spinLoading: true,
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "好好学习天天向上",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women ",
          age: 24,
          address: "Shanghai",
        },
      ],
      pagination: {
        current: 1,
        total: 100,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showSizeChanger: true,
        showQuickJumper: true,
      },
    };
  },
  created() {},
  mounted() {
    //初始化
    this.init();
  },
  methods: {
    openLoading(text) {
      this.textLoading = text;
      this.spinLoading = true;
    },
    init() {
      this.openLoading(this.loadingTextObj.loading);

      setTimeout(() => {
        this.spinLoading = false;
      }, 1000);
    },
  },
  activated() {},
  deactivated() {},
};
</script>

<style lang="less" scoped>
</style>